<template>
	<el-dialog v-dialogDrag :visible.sync="dialogVisible" width="480px" :before-close="onClose"
		custom-class="add-friend-dialog" :show-close="false">
		<!-- 弹窗头部 -->
		<div slot="title" class="dialog-header">
			<div class="header-left">
				<i class="fas fa-user-plus header-icon"></i>
				<span class="header-title">添加好友</span>
			</div>
			<button class="custom-close-btn" @click="onClose">
				<i class="fas fa-times"></i>
			</button>
		</div>

		<!-- 搜索区域 -->
		<div class="search-section">
			<el-input placeholder="输入用户名或昵称搜索好友" class="search-input" v-model="searchText" size="medium"
				@keyup.enter.native="onSearch()" clearable>
				<template #prefix>
					<i class="fas fa-search search-icon"></i>
				</template>
				<el-button slot="append" @click="onSearch()" type="primary">
					<i class="fas fa-search"></i>
				</el-button>
			</el-input>
			<div class="search-tip">
				<i class="fas fa-info-circle"></i>
				最多展示20条搜索结果
			</div>
		</div>

		<!-- 用户列表 -->
		<div class="user-list-container">
			<el-scrollbar class="user-scrollbar">
				<div class="user-list">
					<div v-for="(user) in users" :key="user.id" v-show="user.id != userStore.userInfo.id">
						<div class="user-item">
							<div class="user-avatar">
								<head-image :name="user.nickName" :url="user.headImage" :online="user.online"
									:size="48"></head-image>
								<div class="online-indicator" :class="{ 'online': user.online }"></div>
							</div>
							<div class="user-info">
								<div class="user-name-row">
									<span class="nick-name">{{ user.nickName }}</span>
									<span class="online-status" :class="{ 'online': user.online }">
										<i :class="user.online ? 'fas fa-circle' : 'fas fa-circle'"></i>
										{{ user.online ? "在线" : "离线" }}
									</span>
								</div>
								<div class="username-row">
									<i class="fas fa-at username-icon"></i>
									<span class="username">{{ user.userName }}</span>
								</div>
							</div>
							<div class="action-buttons">
								<el-button v-show="!isFriend(user.id)" type="primary" size="small"
									@click="onAddFriend(user)" class="add-btn">
									<i class="fas fa-user-plus"></i>
									添加
								</el-button>
								<el-button v-show="isFriend(user.id)" type="success" size="small" plain disabled
									class="added-btn">
									<i class="fas fa-check"></i>
									已添加
								</el-button>
							</div>
						</div>
					</div>

					<!-- 空状态 -->
					<div v-if="users.length === 0" class="empty-state">
						<i class="fas fa-search empty-icon"></i>
						<p class="empty-text">暂无搜索结果</p>
						<p class="empty-desc">请尝试输入其他关键词搜索</p>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</el-dialog>
</template>

<script>
import HeadImage from '../common/HeadImage.vue'
import { findUserByNameApi } from '@/api/imUser.js'
import { addFriendApi } from '@/api/imFriend.js'

export default {
	name: "addFriend",
	components: { HeadImage },
	data() {
		return {
			users: [],
			searchText: ""
		}
	},
	props: {
		dialogVisible: {
			type: Boolean
		}
	},
	methods: {
		onClose() {
			// 清空搜索结果和搜索文本
			this.searchText = "";
			this.users = [];
			this.$emit("close");
		},
		onSearch() {
			if (!this.searchText) {
				this.users = [];
				return;
			}
			findUserByNameApi(this.searchText).then((res) => {
				this.users = res.data;
			}).catch((error) => {
				console.error("搜索用户失败：", error);
				this.$message.error("搜索失败：" + (error.message || "未知错误"));
			})
		},
		onAddFriend(user) {
			addFriendApi(user.id).then(() => {
				this.$message.success("添加成功，对方已成为您的好友");
				let friend = {
					id: user.id,
					nickName: user.nickName,
					headImage: user.headImage,
					online: user.online,
					deleted: false
				}
				this.friendStore.addFriend(friend);
			}).catch((error) => {
				this.$message.error("添加好友失败：" + (error.message || "未知错误"));
			})
		},
		isFriend(userId) {
			return this.friendStore.isFriend(userId);
		}
	},
	watch: {
		// 监听弹窗显示状态，关闭时清空数据
		dialogVisible(newVal) {
			if (!newVal) {
				this.searchText = "";
				this.users = [];
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

// 弹窗样式
:deep(.add-friend-dialog) {
	.el-dialog {
		border-radius: var(--im-border-radius-lg);
		box-shadow: var(--im-box-shadow-dialog);
		overflow: hidden;
	}

	.el-dialog__header {
		padding: 0;
		border-bottom: var(--im-border);
	}

	.el-dialog__body {
		padding: 0;
	}


}

// 弹窗头部
.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--im-spacing-lg) var(--im-spacing-xl);
	background: var(--im-bg-primary);
	border-bottom: var(--im-border);

	.header-left {
		display: flex;
		align-items: center;

		.header-icon {
			font-size: 20px;
			color: var(--im-color-primary);
			margin-right: var(--im-spacing-sm);
		}

		.header-title {
			font-size: var(--im-font-size-lg);
			font-weight: var(--im-font-weight-semibold);
			color: var(--im-text-color-primary);
		}
	}

	.custom-close-btn {
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 50%;
		background: var(--im-bg-secondary);
		color: var(--im-text-color-secondary);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		transition: all var(--im-transition-base);

		&:hover {
			background: var(--im-color-danger);
			color: white;
			transform: scale(1.1);
		}

		&:focus {
			outline: none;
		}
	}
}

// 搜索区域
.search-section {
	padding: var(--im-spacing-lg) var(--im-spacing-xl);
	background: var(--im-bg-primary);
	border-bottom: var(--im-border);

	.search-input {
		:deep(.el-input__inner) {
			border-radius: var(--im-border-radius-base);
			border: var(--im-border);
			background: var(--im-bg-secondary);
			color: var(--im-text-color-primary);

			&:focus {
				border-color: var(--im-color-primary);
				box-shadow: 0 0 0 2px var(--im-color-primary-light-8);
			}
		}

		:deep(.el-input-group__append) {
			border-left: none;
			background: var(--im-color-primary);
			border-color: var(--im-color-primary);

			.el-button {
				background: transparent;
				border: none;
				color: white;

				&:hover {
					background: rgba(255, 255, 255, 0.1);
				}
			}
		}
	}

	.search-icon {
		color: var(--im-text-color-placeholder);
		font-size: var(--im-font-size-sm);
	}

	.search-tip {
		display: flex;
		align-items: center;
		margin-top: var(--im-spacing-sm);
		font-size: var(--im-font-size-xs);
		color: var(--im-text-color-secondary);

		i {
			margin-right: var(--im-spacing-xs);
			color: var(--im-color-info);
		}
	}
}

// 用户列表容器
.user-list-container {
	height: 400px;
	background: var(--im-bg-primary);

	.user-scrollbar {
		height: 100%;

		:deep(.el-scrollbar__wrap) {
			overflow-x: hidden;
		}
	}
}

// 用户列表
.user-list {
	padding: var(--im-spacing-sm);
}

// 用户项
.user-item {
	display: flex;
	align-items: center;
	padding: var(--im-spacing-base);
	margin-bottom: var(--im-spacing-xs);
	border-radius: var(--im-border-radius-base);
	background: var(--im-bg-secondary);
	border: 1px solid transparent;
	transition: all var(--im-transition-base);
	position: relative;

	&:hover {
		background: var(--im-bg-hover);
		border-color: var(--im-color-primary-light-7);
		transform: translateY(-1px);
		box-shadow: var(--im-box-shadow-hover);
	}

	&:last-child {
		margin-bottom: 0;
	}
}

// 用户头像区域
.user-avatar {
	position: relative;
	margin-right: var(--im-spacing-base);

	.online-indicator {
		position: absolute;
		bottom: 2px;
		right: 2px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--im-text-color-disabled);
		border: 2px solid var(--im-bg-secondary);
		transition: all var(--im-transition-base);

		&.online {
			background: var(--im-color-success);
		}
	}
}

// 用户信息
.user-info {
	flex: 1;
	min-width: 0;

	.user-name-row {
		display: flex;
		align-items: center;
		margin-bottom: var(--im-spacing-xs);

		.nick-name {
			font-size: var(--im-font-size-base);
			font-weight: var(--im-font-weight-semibold);
			color: var(--im-text-color-primary);
			margin-right: var(--im-spacing-sm);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.online-status {
			display: flex;
			align-items: center;
			font-size: var(--im-font-size-xs);
			color: var(--im-text-color-disabled);

			&.online {
				color: var(--im-color-success);
			}

			i {
				font-size: 8px;
				margin-right: 4px;
			}
		}
	}

	.username-row {
		display: flex;
		align-items: center;
		font-size: var(--im-font-size-sm);
		color: var(--im-text-color-secondary);

		.username-icon {
			margin-right: var(--im-spacing-xs);
			color: var(--im-text-color-placeholder);
		}

		.username {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

// 操作按钮
.action-buttons {

	.add-btn,
	.added-btn {
		border-radius: var(--im-border-radius-base);
		font-size: var(--im-font-size-sm);
		padding: var(--im-spacing-xs) var(--im-spacing-base);

		i {
			margin-right: var(--im-spacing-xs);
		}
	}

	.add-btn {
		background: var(--im-color-primary);
		border-color: var(--im-color-primary);

		&:hover {
			background: var(--im-color-primary-dark-1);
			border-color: var(--im-color-primary-dark-1);
			transform: translateY(-1px);
			box-shadow: var(--im-box-shadow-hover);
		}
	}

	.added-btn {
		background: var(--im-color-success-light-8);
		border-color: var(--im-color-success-light-5);
		color: var(--im-color-success);
	}
}

// 空状态
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--im-spacing-xxl);
	text-align: center;

	.empty-icon {
		font-size: 48px;
		color: var(--im-text-color-placeholder);
		margin-bottom: var(--im-spacing-lg);
		opacity: 0.6;
	}

	.empty-text {
		font-size: var(--im-font-size-base);
		color: var(--im-text-color-primary);
		margin: 0 0 var(--im-spacing-xs) 0;
		font-weight: var(--im-font-weight-medium);
	}

	.empty-desc {
		font-size: var(--im-font-size-sm);
		color: var(--im-text-color-secondary);
		margin: 0;
	}
}
</style>
